<!DOCTYPE html>
<html>
<head>
<title>地址管理_蘑菇街</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/order.css">
<link rel="stylesheet" type="text/css" href="css/iconfont/iconfont.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">

<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="./js/slideshow.js"></script>
	<script src="/webjars/jquery/3.4.1/jquery.min.js"></script>
	<script src="/webjars/jquery-cookie/1.4.1-1/jquery.cookie.js"></script>
	<script src="/webjars/bootstrap/3.3.7/js/bootstrap.js"></script>
	<script src="/webjars/vue/2.6.10/dist/vue.js"></script>
	<script src="/webjars/axios/0.19.0/dist/axios.js"></script>
	<script src="js/PCASClass.js"></script>

	<script>
  $(function(){
    $(".login_font").mouseover(function(){
      $(this).find("#service").show();//显示
    })
    $(".login_font").mouseleave(function(){
      $("#service").hide();
    })
    $(".login_font").mouseover(function(){
      $(this).find("#service_one").show();//显示
    })
    $(".login_font").mouseleave(function(){
      $("#service_one").hide();
    })
    $(".login_font").mouseover(function(){
      $(this).find("#service_two").show();//显示
    })
    $(".login_font").mouseleave(function(){
      $("#service_two").hide();
    })
    $(".order_ul li").mouseover(function(){
      $("#order_two").hide();
      $("#vip").hide();
      $(this).find("#order_two").show();
    })
    $(".order_ul li").mouseleave(function(){
      $(this).find("#order_two").hide();
      $("#vip").show();
    })
   
})
</script>



</head>
<body>
<div id="vuebox">
<div id="index" style="width: 1900px">
    <ul class="index_menu">
		<li class="index_font">
			<a href="index.html"><i class="iconfont icon-1" style="font-size: 13px;color: #666"></i>  蘑菇街首页</a>
		</li>


		<li class="login_font login_one">
			<a href="login.html" v-if="account==null">登录</a>
			<a href="#" v-if="account!=null">{{account}}</a>
			<a href="" style="font-size: 12px;color: #DDDDDD;margin:3px;">&nbsp;&nbsp;&nbsp;|</a>
		</li>
		   
		<li class="login_font">
		    <a href=""><i class="iconfont icon-index2" style="font-size: 10px;"></i> 我的订单</a> 
		    <a href="" style="font-size: 12px;color: #DDDDDD;margin:3px;">&nbsp;&nbsp;&nbsp;|</a>
		</li>
		   
		<li class="login_font">
		    <a href=""><i class="iconfont icon-cart" style="font-size: 18px;color: #ff0077;"></i> 购物车</a>
		    <a href="" style="font-size: 12px;color: #DDDDDD;margin:3px;">&nbsp;&nbsp;&nbsp;|</a>
		    <div id="service_one">
				<ul>
					<li><a href="">购物车里没有商品！点击前往</a></li>
				</ul>
		    </div>
		</li>
		    
		<li class="login_font">
		    <a href="" >客户服务 <i class="iconfont icon-moreunfold"></i></a>
		    <a href="" style="font-size: 12px;color: #DDDDDD;margin:3px;">&nbsp;&nbsp;&nbsp;|</a>
		    <div id="service">
				<ul>
					<li><a href="">消费者服务</a></li>
					<li><a href="">商家服务</a></li>
					<li><a href="">规则中心</a></li>
				</ul>
		    </div>
		</li>
		    
		<li class="login_font">
		    <a href=""><i class="iconfont icon-yunxiaodian" style="font-size: 15px;color: #eb2a12"></i>  我的小店</a>
		    <div id="service_two">
				<ul>
					<li><a href="">后台管理</a></li>
					<li><a href="">商家社区</a></li>
					<li><a href="">商家培训</a></li>
					<li><a href="">市场入驻</a></li>
				</ul>
		    </div>
		</li>
    </ul>
</div>
<div id="fixed">
	<ul>
		<li>
			<a href=""><i class="iconfont icon-cart1" style="font-size: 14px;"></i>购物车</a>

		</li>
		<div class="line"></div>
		<li>
			<a href=""><i class="iconfont icon-coupon" style="font-size: 14px;"></i>优惠券</a>
		</li>
		<div class="line"></div>
		<li>
			<a href=""><i class="iconfont icon-wealthselected" style="font-size: 14px;"></i>钱包</a>
		</li>
		<div class="line"></div>
		<li>
			<a href=""><i class="iconfont icon-foot" style="font-size: 14px;"></i>足迹</a>
		</li>
		<div class="line"></div>
	</ul>

</div>
<div id="head">
    <div id="logo">
		<a href=""><img src="img/logo.png"></a>
    </div>
    <div id="search_box" style="position: relative;left: 300px">
        <div id="search_font">
			<ul>
				<li><a href="">搜商品</a><i class="iconfont icon-sanjiaoxing02" style="color: #ff0077;"></i></li>
			</ul>
        </div>
        <div>
          <form action="">
			<input type="text" name="" class="input_box" placeholder="高腰时尚套装">
			<button type="submit" class="search">搜索</button>
			</form>
		</div>
		 <div id="out_search_font">
		<ul>
			<li class="">
			<a href="">牛仔哈伦裤</a>
			<a href="">沙发巾</a>
			<a href="">秋季男鞋</a>
			<a href="">拉杆箱</a>
			<a href="">化妆收纳包</a>
			</li>
		</ul>
    </div>
    </div>
</div>
<div id="body_wrap" style="width: 1875px">
	<div id="mu_wrap">
		<div class="mu_nav_wrap" style="position: relative;left: 200px">
			<div class="mu_nav_info">
				<img src="img/888888.PNG">
				<p>Michael</p>
			</div>
			<div class="mu_expand">
				<div class="mu_expand_my">
					<a href="order.html"><p>我的订单 ></p></a>
				</div>
				<div class="mu_expand_my">
					<p>我的钱包 ></p>
				</div>
				<div class="mu_expand_my">
					<p>优惠特权 ></p>
				</div>
				<div class="mu_expand_my">
					<a href="address.html"><p>地址管理 ></p></a>
				</div>
				<div class="mu_expand_my">
					<p>安全设置 ></p>
				</div>
				<div class="mu_expand_my">
					<p>维权管理 ></p>
				</div>
				<div class="mu_expand_my">
					<p>账号设置 ></p>
				</div>
			</div>
		</div>


		<!-- 添加地址模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">添加地址</h4>
					</div>


					省：<select name="province3" id="sheng"></select>市：<select name="city3" id="shi"></select>区：<select name="area3" id="qu"></select><br><br>
					街道地区:<input type="text" id="jiedao" style="width: 500px"><br><br>
					收货人姓名:<input type="text" name="realname" v-model="realname"><br><br>
					手机号:<input type="text" v-model="phone">



					<div class="modal-footer">
						<button type="button" class="btn btn-default" id="guanbi" data-dismiss="modal">关闭</button>
						<button type="button" @click="insertaddress()" class="btn btn-primary">确定提交</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>

		<p style="position: relative;left: 330px;top: 30px;font-size: 15px;">地址管理</p>
		<hr style="width: 1000px;margin-left: 450px;position: relative;top: 20px;">
		<a href="#" data-toggle="modal" data-target="#myModal"><img src="img/添加地址.PNG" style="position: relative;left: 330px;top: 20px"></a>


		<div v-for="item in address">
			<div v-if="item.status==1" style="border: 1px solid gainsboro;width: 960px;height: 45px;position: relative;left: 475px;top: 28px;background-color: antiquewhite;box-shadow: 0px 0px 1px 1px antiquewhite;">
                  <p style="position: relative;left: -125px;top: 10px;">{{item.realname}}</p>
				  <p style="position: relative;top: -20px;left: -10px">{{item.address}}</p>
				  <p style="position: relative;top: -20px;left: 380px;top: -47px;">{{item.phone}}</p>
				  <a href="#" v-if="item.status==1">
					  <span  style="position: relative;top: -20px;left: 690px;top: -77px;">默认地址</span>
				  </a>
			    	<a href="#" v-if="item.status==0">
				     设为默认
				   </a>

				<a href="javascript:;" @click="deletaddress(item.id)">
					<span style="position: relative;top: -20px;left: 707px;top: -77px;">删除</span>
				</a>
			</div>

			<div v-if="item.status==0" style="border: 1px solid gainsboro;width: 960px;height: 45px;position: relative;left: 475px;top: 28px;">
				<p style="position: relative;left: -125px;top: 10px;">{{item.realname}}</p>
				<p style="position: relative;top: -20px;left: -10px">{{item.address}}</p>
				<p style="position: relative;top: -20px;left: 380px;top: -47px;">{{item.phone}}</p>
				<a href="#" v-if="item.status==1">
					<span  style="position: relative;top: -20px;left: 690px;top: -77px;">默认地址</span>
				</a>
				<a href="#" v-if="item.status==0" @click="updatemoren(item.id)">
					<span  style="position: relative;top: -20px;left: 690px;top: -77px;">设为默认</span>
				</a>
				<a href="javascript:;" @click="deletaddress(item.id)">
					<span style="position: relative;top: -20px;left: 707px;top: -77px;">删除</span>
				</a>
			</div>
			<br>
		</div>


		</div>
	
</div>
<div id="ending"  style="position: relative;left: 270px;">
	<div id="ending_head">
		<div class="help">
			<h5>-新手帮助-</h5>
			<ul class="help_ul">
				<li><a href="">常见问题</a></li>
				<li><a href="">自助服务</a></li>
				<li><a href="">联系客服</a></li>
				<li><a href="">意见反馈</a></li>
			</ul>
		</div>
		<div class="help">
			<h5>-权益保障-</h5>
			<ul class="help_ul">
				<li><a>全国包邮</a></li>
				<li><a>7天无理由退货</a></li>
				<li><a>退货运费补贴</a></li>
				<li><a>限时发货</a></li>
			</ul>
		</div>
		<div class="help">
			<h5>-支付方式 -</h5>
			<ul class="help_ul">
				<li><a>微信支付</a></li>
				<li><a>支付宝</a></li>
				<li><a>白付美支付</a></li>
			</ul>
		</div>
		<div class="help">
			<h5>-移动客户端下载 -</h5>
			<ul class="help_ul">
				<li><a>蘑菇街</a></li>
				<li><a>美丽说</a></li>
				<li><a>uni引力</a></li>
			</ul>
		</div>
	</div>
	<div class="ending_end">
		<ul class="ending_font">
			<li><a href="">关于我们</a></li>
			<li><a href="">招聘信息</a></li>
			<li><a href="">联系我们</a></li>
			<li><a href="">商家入驻</a></li>
			<li><a href="">商家后台</a></li>
			<li><a href="">蘑菇商学院</a></li>
			<li><a href="">商家社区</a></li>
			<li><a href="">规则中心</a></li>
		</ul>
		<p>©2017 Mogujie.com 杭州卷瓜网络有限公司</p>
	</div>
	<div class="ending_end">
		<p>
			<span>营业执照注册号：</span>
			<a href="">330106000129004</a>
			<b> | </b>
			<span>网络文化经营许可证：</span>
			<a href="">浙网文（2016）0349-219号</a>
			<b> | </b>
			<span>增值电信业务经营许可证：</span>
			<a href="">浙B2-20110349</a>
			<b> | </b>
			<span>增值电信业务经营许可证：</span>
			<b> | </b>
			<a href="">浙公网安备 33010602002329号</a>
			<b> | </b>
		</p>
	</div>
</div>
</div>
</body>
</html>

<script>
    var vm = new Vue({
        el:"#vuebox",
        data : {
           address:{},
			userid:0,
			realname:"",
			phone:"",
			add:"",
			account:"",
			morenid:0
        },
        methods : {
            selectAddress:function () {
				axios.get("/address/manager/query/address/view/list/by/uid",{
				    params:{
                        uidaddress:this.user
					}
				}).then(res=>{
				    this.address = res.data
					console.log(this.address)
				})
            },
			insertaddress:function () {
                var sheng=  document.getElementById("sheng").value
                var shi=  document.getElementById("shi").value
                var qu=  document.getElementById("qu").value
                var jiedao=  document.getElementById("jiedao").value
				this.add = sheng+shi+qu+jiedao
		        axios.post("http://localhost:80/address/manager/insertaddress",{
                    uidaddress:this.userid,
                    address:this.add,
                    phone:this.phone,
                    realname:this.realname
				}).then(res=>{
				    if(res.data.status =="添加成功"){
				        alert("添加成功")
						$('#guanbi').click();
						this.selectAddress()
					}else{
                        alert("添加失败")
					}
				})

            },
            deletaddress:function (id) {
				 axios.get("/address/manager/deleteaddress",{
				     params:{
				         id:id
					 }
				 }).then(res=>{
				     if(res.data.status=="删除成功"){
						 this.selectAddress()
					 }else{
                         alert("删除失败")
					 }
				 })
            },
            updateaddressstatus:function (id) {
				axios.get("/address/manager/updateaddress",{
				    params:{
				        id:id
					}
				}).then(res=>{
				    if(res.data.status=="修改成功"){
						this.selectAddress();
					}else{
				        alert("修改失败")
					}
				})
            },
			updatemoren:function (id) {
				axios.get("/address/manager/updatemoren",{
				    params:{
                        id:this.morenid
					}
				}).then(res=>{
				    if(res.data.status =="修改成功"){
                        this.updateaddressstatus(id);
					}else{
                        alert("修改失败")
					}
				})
            },
            selectmoren:function () {
				axios.get("/address/manager/selectByStatus",{
				    params:{
				        status:1
					}
				}).then(res=>{
					this.morenid = res.data.id
				})
            }
        },
        mounted(){
            this.account = sessionStorage.getItem("realname")
           var uidaddress =  sessionStorage.getItem("loginid")
			this.userid = uidaddress
			this.selectAddress();
            this.selectmoren();
        }
    });
</script>

<script>
    new PCAS("province3","city3","area3");
</script>
